<template>
  <view class="content">
    <!-- title -->
    <header-modal></header-modal>

    <!-- 设置密码 -->
    <view class="info fz30">
      <view class="main-theme-color">请选择</view>
      <view class="main-theme-color">您要使用的柜门类型</view>
      <view v-if="state.midwayPickTimes > 0">
        <sw-icons color="#008afe" icon="icon-liebiaoxunhuan" class="mr10"></sw-icons>
        可中途开门{{ state.midwayPickTimes }}次
      </view>
      <view v-else>
        <sw-icons color="#008afe" icon="icon-danquxunhuan" class="mr10"></sw-icons>
        不可中途开门
      </view>
    </view>

    <!-- 柜子列表 -->
    <view class="list">
      <view class="item flex flex-y-center mt40 fz30 bg-white bdr20" v-for="(item, index) in state.dataSource" :key="index" @click="onSure(item.cellType)">
        <sw-icons type="symbol" size="80" icon="icon-xiaogui" v-if="item.cellType.toString() === '0'"></sw-icons>
        <sw-icons type="symbol" size="80" icon="icon-zhonggui" v-if="item.cellType.toString() === '1'"></sw-icons>
        <sw-icons type="symbol" size="80" icon="icon-dagui" v-if="item.cellType.toString() === '2'"></sw-icons>
        <sw-icons type="symbol" size="80" icon="icon-chaodagui" v-if="item.cellType.toString() === '3'"></sw-icons>
        <view class="flex1 gray9">
          <view class="t">
            <text class="main-theme-color" v-if="item.cellType.toString() === '0'">小柜</text>
            <text class="main-theme-color" v-if="item.cellType.toString() === '1'">中柜</text>
            <text class="main-theme-color" v-if="item.cellType.toString() === '2'">大柜</text>
            <text class="main-theme-color" v-if="item.cellType.toString() === '3'">超大柜</text>
            （可用{{ item.availableNum }}个）
          </view>
          <view class="mt30" v-if="item.cellType.toString() === '0'">可存放背包、购物袋等</view>
          <view class="mt30" v-if="item.cellType.toString() === '1'">可存放挎包等</view>
          <view class="mt30" v-if="item.cellType.toString() === '2'">可存放大件物品</view>
          <view class="mt30" v-if="item.cellType.toString() === '3'">可存放行李箱等</view>
        </view>
        <sw-icons color="#008afe" icon="icon-arrow-right" class="mr10"></sw-icons>
      </view>

      <view class="btn-box flex mt40"><button class="btn flex1 main-theme-bgcolor fff" @click="$jump.back()">返回</button></view>
    </view>
  </view>
</template>

<script setup>
import HeaderModal from '@/components/header/index.vue';
import { ref, reactive, getCurrentInstance } from 'vue';
import { queryByMainBoardId } from '@/common/js/getData.js';
import { onLoad } from '@dcloudio/uni-app';

const { proxy } = getCurrentInstance();

const popupRef = ref(null);

const state = reactive({
  dataSource: [],
  midwayPickTimes: ''
});

// 页面加载完成
onLoad(async () => {
  await proxy.$onLaunched;
  loadData();
});

// 获取数据
const loadData = () => {
  const data = { mainboardId: getApp().globalData.mainboardId };
  queryByMainBoardId(data)
    .then(res => {
      state.dataSource = res.result.availableCellList;
      state.midwayPickTimes = res.result.midwayPickTimes;
    })
    .catch(res => {
      uni.showToast({
        icon: 'none',
        title: '网络错误，请稍候再试'
      });
    });
};

// 确定
const onSure = cellType => {
  proxy.$jump.navigateTo(`/pages/deposit/cellpay?cellType=${cellType}`);
};
</script>

<style lang="less" scoped>
.info {
  line-height: 60rpx;
  padding: 30rpx 40rpx;
}

.list {
  position: relative;
  padding: 25rpx 40rpx;

  .item {
    padding: 40rpx 20rpx 40rpx 60rpx;
    box-shadow: 5rpx 10rpx 30rpx rgba(#000, 0.1);

    .icon {
      margin-right: 60rpx;
    }
  }
}
</style>
